<template>
  <el-table :data="fieldJson" height="67vh" row-key="id" border stripe style="width: 100%">
    <el-table-column type="expand">
      <template #default="scope">
        <el-form
          :inline="true"
          size="small"
          label-position="top"
          :model="scope"
          class="demo-form-inline"
        >
          <el-form-item label="固定列" style="width: 150px">
            <el-select v-model="scope.row.fixed" placeholder="Select">
              <el-option
                v-for="(fixedsItem, index) in fixeds"
                :key="index"
                :label="fixedsItem.label"
                :value="fixedsItem.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标题对齐" style="width: 150px">
            <el-select v-model="scope.row.headerAlign" placeholder="Select">
              <el-option
                v-for="(item, index) in aligns"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="内容对齐" style="width: 150px">
            <el-select v-model="scope.row.align" placeholder="Select">
              <el-option
                v-for="(item, index) in aligns"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="最小宽度">
            <el-input-number v-model="scope.row.minWidth" placeholder="最小宽度" />
          </el-form-item>
          <el-tooltip effect="dark" content="优先级高于最小宽度，删除则取消固定。" placement="top">
            <el-form-item label="固定宽度">
              <el-input-number v-model="scope.row.width" placeholder="固定宽度" />
            </el-form-item>
          </el-tooltip>
          <el-form-item v-if="scope.row.type.value === 'image'" label="图片大小">
            <el-input-number v-model="scope.row.type.image.height" placeholder="图片大小" />
          </el-form-item>
          <el-form-item
            v-if="scope.row.type.value === 'url'"
            label="正则表达式(仅影响数据展示，不会改变实际值) match[0]"
          >
            <el-input v-model="scope.row.type.url.regEx" clearable />
          </el-form-item>
          <el-form-item v-if="scope.row.type.value === 'text'" label="预处理器 (value)=>{}">
            <!-- <el-input v-model="scope.row.type.text.regEx" clearable /> -->
            <MonacoEdit v-model="scope.row.type.text.regEx" style="width: 600px" />
          </el-form-item>
          <el-form-item v-if="scope.row.type.value === 'code'" label="代码语言(java,sql,xml...)">
            <el-input v-model="scope.row.type.code.language" clearable />
          </el-form-item>
          <template v-if="scope.row.type.value === 'select'">
            <el-form-item label="选项数据源">
              <el-select
                v-model="scope.row.type.select.optionId"
                filterable
                placeholder="Select"
                size="small"
                style="width: 160px"
              >
                <el-option
                  v-for="(item, index) in options.options"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="多选">
              <el-switch v-model="scope.row.type.select.multiple" /> </el-form-item
            ><el-form-item label="树状">
              <el-switch v-model="scope.row.type.select.tree" /> </el-form-item
            ><el-form-item label="文本展示">
              <el-switch v-model="scope.row.type.select.showText" /> </el-form-item
            ><el-form-item label="标签展示">
              <el-switch v-model="scope.row.type.select.showTag" /> </el-form-item
          ></template>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="显示"
      prop="isShow"
      width="70"
      :filters="[
        { text: '显示', value: true },
        { text: '隐藏', value: false }
      ]"
      :filter-method="filterHandler"
    >
      <template #default="scope">
        <el-switch size="small" v-model="scope.row.isShow" />
      </template>
    </el-table-column>
    <el-table-column label="名称" prop="name">
      <template #default="scope">
        <el-input v-model="scope.row.label" size="small" clearable />
      </template>
    </el-table-column>
    <el-table-column label="字段名" prop="field">
      <template #default="scope">
        <el-input v-model="scope.row.field" size="small" clearable />
      </template>
    </el-table-column>
    <el-table-column label="排序" width="60" prop="isSort">
      <template #default="scope">
        <el-switch size="small" v-model="scope.row.isSort" />
      </template>
    </el-table-column>
    <el-table-column label="点击复制" width="90" prop="isCopy">
      <template #default="scope">
        <el-switch size="small" v-model="scope.row.isCopy" />
      </template>
    </el-table-column>
    <el-table-column label="类型" prop="type">
      <template #default="scope">
        <el-select v-model="scope.row.type.value" placeholder="Select" size="small">
          <el-option
            v-for="(typesItem, index) in types"
            :key="index"
            :label="typesItem.label"
            :value="typesItem.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="170" prop="isSort">
      <template #default="scope">
        <OperationView v-model="fieldJson" :scope />
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import MonacoEdit from '@/views/template/util/MonacoEdit.vue'
import OperationView from './OperationView.vue'
import { useOptionDataStore } from '@/stores/optionData'
import { storeToRefs } from 'pinia'
const storeOptionData = useOptionDataStore()
const { options } = storeToRefs(storeOptionData)
const fieldJson = defineModel({ default: [] })
// const fieldJson = {
//   id: 1,
//   isShow: true,
//   field: '模板',
//   label: '模板',
//   isSort: false,
//   isCopy: false,
//   type: {
//     value: 'text',
//     text: {
//       password:true,
//       regEx: ''
//     }
//     url: {
//       regEx: ''
//     },
//     code: {
//       language: 'java'
//     },
//     select: {
//       optionId: '',
//       tree:false,
//       multiple:false,
//       showText:false
//     },
//     image:{
//       height: 50
//     }
//   },
//   minWidth: 100,
//   width: 0,
//   fixed: 'false',
//   headerAlign: 'center',
//   align: 'center'
// }
// 表格展示数据类型
const types = [
  {
    value: 'text',
    label: '文本'
  },
  {
    value: 'image',
    label: '图片'
  },
  {
    value: 'switch',
    label: '开关'
  },
  {
    value: 'url',
    label: '超链接'
  },
  {
    value: 'JavaScript',
    label: 'JavaScript'
  },
  {
    value: 'editor',
    label: '富文本'
  },
  {
    value: 'json',
    label: 'json'
  },
  {
    value: 'select',
    label: '选项(影响页面刷新速度)'
  },
  {
    value: 'password',
    label: '密码'
  }
]
// 列对其方式
const fixeds = [
  {
    value: 'left',
    label: '左固定'
  },
  {
    value: 'right',
    label: '右固定'
  },
  {
    value: 'false',
    label: '取消固定'
  }
]

// 列对其方式
const aligns = [
  {
    value: 'left',
    label: '左对齐'
  },
  {
    value: 'center',
    label: '居中'
  },
  {
    value: 'right',
    label: '右对齐'
  }
]
// 初始化一些数据
load()
function load() {
  // 初始化选项列表
  storeOptionData.refreshOptions()
}
// 过滤字段
function filterHandler(value, row, column) {
  return row.isShow === value
}
</script>
<style scoped>
.cursor:hover {
  cursor: pointer;
}
.el-form {
  margin: 0px 10px;
}
:deep(.el-table__expanded-cell) {
  background-color: hsl(0, 0%, 95%) !important;
}
:deep(.el-divider__text) {
  background-color: hsl(0, 0%, 95%) !important;
}
</style>
